<template>
  <el-container>
    <el-header class="el-header-admin">后台管理系统</el-header>
    <el-main>
      <el-row>
        <el-col :span="8" :offset="8">
          <div id="loginBox">
            用户登录<br>
            账号：
            <el-input class="input" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            <br>
            密码：
            <el-input class="input" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            <br>
            <div id="verifyCode">
              <el-input class="input" v-model="code" placeholder="请输入验证码"
                        style="width: 44%;position: relative;top: -14px;"></el-input>
              <el-image
                  style="width: 80px; height: 38px;margin-left: 0px;border-radius: 2px;"
                  :src="codeImg"
              ></el-image>
              <br>
            </div>
            <el-button type="primary">重置</el-button>
            <el-button type="primary" @click="login()">登录</el-button><br>
            <el-link type="primary" @click="toRegister()">注册一个账户？</el-link>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import store from "../store/store";
import {userLogin} from "../api/user";

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      code: '',
      codeImg: '',
      codeVerify: ''
    };
  },
  mounted() {
    this.handleCaptcha()
  },
  methods: {
    // 登录
    login() {
      // 登录
      if (this.code !== this.codeVerify) {
        this.$message.error("请输入正确的验证码")
        return
      }
      userLogin({
        username: this.loginForm.username,
        password: this.loginForm.password,
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.$message.success("登录成功")
          // 存储token
          store.commit("setToken", resp.data.token)
          store.commit("setUser",resp.data.user)
          store.commit("setRole",resp.data.user.role)
          this.$router.push("/adminHome")
        } else {
          this.$message.error("登录失败")
        }
      })
    },
    toRegister(){
      this.$router.replace("/register")
    },
    handleCaptcha() {
      axios.post('/verify', {
        responseType: "arraybuffer",
      }).then(res => {
        this.codeVerify = res.data.code;
        return 'data:image/jpeg;base64,' + res.data.obj;
      }).then(data => {
        this.codeImg = data;
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

body, html, .el-container {
  height: 100%;
}

/*放账号密码input的div*/
#loginBox {
  background-color: #eee;
  border-radius: 15px;
  margin-top: 15%;
  font-family: "Adobe 宋体 Std L";
}

/*布局容器样式 main header fotter*/
.el-header-admin {
  background-color: deepskyblue;
  color: #fff;
  text-align: center;
  line-height: 60px;
  font-size: xx-large;
  font-weight: bolder;

}

.el-footer-admin {
  background-color: #bbb;
  color: #000;
  text-align: center;
  line-height: 60px;

}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 80px;
}

/*    输入框样式*/
.input {
  width: 50%;
  padding-top: -20px;
}

/*.input-verify{*/
/*  width: 30%;*/
/*  margin-top: 0;*/
/*  margin-right: 20px;*/
/*}*/

#verifyCode {
  text-align: center;
  margin-top: 17px;
}

</style>
